<template>
	<div class="choose-list-box">
		<div
			class="choose-list"
			@click="isFocus = true"
			v-click-outside="() => isFocus = false"
		>
			<chooseListTop
				:checked="checked"
				@toSearchCallBack="onSearchCallBack"
				class="choose-list-top-content"
			>
			</chooseListTop>

			<RecycleScroller
				v-contextmenu:contextmenu
				class="choose-list-scroller"
				:buffer="500"
				:items="contentList"
				:item-size="isShowAvator? 52: 26"
				key-field="$_entityUuid"
				v-multi-select="checked"
				v-slot="{ item }"
			>
				<div
					:class="['choose-list-item', isShowAvator? 'choose-list-item-avator':'choose-list-item-label', checked[item.$_entityUuid] ? 'checked': '']"
					:data-select-key="item.$_entityUuid"
					:id="item.$_entityUuid"
				>
					<div
						class="choose-list-item-content"
						@dblclick.stop="dblclick(item)"
					>
						<avator-item v-if="isShowAvator" :item="item"/>
						<itemLabel v-else :item="item"/>
					</div>
					<div
						class="choose-list-item-close"
						@click.stop="del([item])"
						@mousedown.stop
					>
						<icon-font type="cap-icon-guanbi"/>
					</div>
				</div>
			</RecycleScroller>
			<v-contextmenu ref="contextmenu">
				<template v-if="selectedList.length > 0">
					<v-contextmenu-item @click="delByIds">
						{{ $i18n('selectPeople.remove.selected') }}
					</v-contextmenu-item>
				</template>
			</v-contextmenu>

		</div>
		<chooseListIocns
			:checked="checked"
			:list="selectedList"
			:disabled="operationDisabled"
		/>
	</div>

</template>

<script>
import Vue from 'vue';
import { mapActions, mapState } from 'vuex';
import contentmenu from '../v-contextmenu';
import { ACTION_REMOVE_ENTITY } from '@/store/actionTypes';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
import { RecycleScroller } from 'vue-virtual-scroller';
import ClickOutside from '@/directive/ClickOutside';
import MultiSelect from '@/directive/MultiSelect';
import chooseListTop from './chooseListTop';
import chooseListIocns from './chooseListIocns';
import itemLabel from './itemLabel';
import avatorItem from './avatorItem';


Vue.use(contentmenu);

export default {
	name: 'chooseList',
	components: { RecycleScroller, chooseListTop, chooseListIocns, itemLabel, avatorItem },
	inject: ['app'],
	data() {
		return {
			isFocus: false,
			startIndex: -1,
			checked: {},

			contentList: [],

			/** 右侧操作按钮disabled */
			operationDisabled: true
		};
	},
	computed: {
		...mapState('selectData', ['selectedList', 'selectedEntityMap']),
		isShowAvator() {
			return this.app().isShowAvator;
		}
	},
	watch: {
		selectedList: {
			handler(val) {
				/**
				 * 删除已经选中的数据
				 */
				Object.keys(this.checked).forEach((key) => {
					if (!this.selectedEntityMap[key]) {
						let index = this.contentList.findIndex(el => el.$_entityUuid === key);
						if (index !== -1) {
							this.contentList.splice(index, 1);
						}
						this.$delete(this.checked, key);
					}
				});
			},
			deep: true
		}
	},
	directives: {
		ClickOutside,
		MultiSelect
	},
	created() {
		document.addEventListener('keydown', this.chooseAll);
		this.contentList = this.selectedList;
	},
	beforeDestroy() {
		document.removeEventListener('keydown', this.chooseAll);
	},
	methods: {
		...mapActions('selectData', {
			deleteSelected: ACTION_REMOVE_ENTITY
		}),
		del(list) {
			this.deleteSelected({
				entities: list
			});
		},
		delByIds() {
			const list = [];
			const ids = Object.keys(this.checked);
			for (let uuid of ids) {
				let entity = this.selectedEntityMap[uuid];
				if (entity) {
					list.push(entity);
				}
			}
			this.del(list);
		},
		chooseAll(e) {
			if (!this.isFocus) {
				return;
			}
			// 按下 ctrl + a
			if ((e.ctrlKey || e.metaKey) && e.keyCode === 65) {
				const checked = {};
				this.selectedList.forEach((it, i) => {
					checked[it.$_entityUuid] = true;
				});
				this.checked = checked;
				e.preventDefault();
			}
		},
		dblclick(item) {
			this.del([item]);
			try {
				window.getSelection().empty();
			} catch (error) {
				console.warn(error);
			}
		},
		onSearchCallBack(resultData) {
			if (resultData.length) {
				resultData.forEach((it) => {
					this.checked[it.$_entityUuid] = it.$_entityUuid;
				});
				this.contentList = resultData;
				this.operationDisabled = true;
			} else {
				this.contentList = this.selectedList;
				this.checked = [];
				this.operationDisabled = false;
			}
		}
	}
};
</script>

<style lang="scss" scoped>

.choose-list-box{
	height: 100%;
	@include clearFix();
}

.choose-list {
	font-size: 14px;
	border: 1px solid $borderColor;
	border-left: 0;
	width: calc(100% - 50px);
	height: 100%;
	float: left;

	.choose-list-top-content {
		height: 32px;
		background: #fff;
		border-bottom: 1px solid $borderColor;
	}

	.choose-list-scroller {
		height: calc(100% - 32px);
		width: 100%;

		.choose-list-item {
			cursor: pointer;
			@include clearFix();

			&.choose-list-item-avator {
				height: 50px;
				padding: 0 10px 0 14px;
				margin-top: 2px;

				.choose-list-item-close{
					height: 50px;
					padding: 19px 1px;
          i{
            color: #A0A0A0 !important;
            font-size: 14px !important;
          }
				}
			}
			&.choose-list-item-label {
				height: 22px;
				padding: 0 10px 0 14px;
				margin-top: 4px;
				.choose-list-item-close{
					height: 22px;
					padding: 4px 1px;
          i{
            color: #A0A0A0 !important;
            font-size: 14px !important;
          }
				}
			}
			&.checked {
				background: $checkedColor;
        .choose-list-item-close{
          display:block
        }
			}

			&:hover {
				background: $hoverColor;

				.choose-list-item-close {
					display: block;
				}
			}

			.choose-list-item-content {
				width: calc(100% - 16px);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: $defaultFontColor;
				float: left;
				img {
						-moz-user-select: none; /*火狐FF*/
						
						-webkit-user-select: none; /*webkit浏览器*/
						
						-ms-user-select: none; /*IE10*/
						
						-khtml-user-select: none; /*早期浏览器*/
					  
						-o-user-select: none; /*opera浏览器*/
						  
						user-select: none;
				}
			}

			.choose-list-item-close {
				float: right;
				display: none;
				border-radius: 50%;
				width: 16px;
				line-height: 16px;
				color: #fff;
				text-align: center;
				font-size: 12px;
			}
		}
	}
}
</style>
